<script setup lang="ts">
import { Grid, GridItem } from "vue3-test-ui";
</script>
<template>
  <Grid cols="4" x-gap="10px" y-gap="10px">
    <GridItem class="btn">AC</GridItem>
    <GridItem class="btn">/</GridItem>
    <GridItem class="btn">*</GridItem>
    <GridItem class="btn">+</GridItem>
    <GridItem class="btn">1</GridItem>
    <GridItem class="btn">2</GridItem>
    <GridItem class="btn">3</GridItem>
    <GridItem class="btn">-</GridItem>
    <GridItem class="btn">4</GridItem>
    <GridItem class="btn">5</GridItem>
    <GridItem class="btn">6</GridItem>
    <GridItem rowspan="3" class="btn">=</GridItem>
    <GridItem class="btn">7</GridItem>
    <GridItem class="btn">8</GridItem>
    <GridItem class="btn">9</GridItem>
    <GridItem colspan="2" class="btn">0</GridItem>
    <GridItem class="btn">.</GridItem>
  </Grid>
</template>
<style>
.btn {
  cursor: pointer;
  color: white;
  padding: 16px;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid #5d5e62;
  background-color: #5d5e62;
  font-weight: bold;
  font-size: 24px;
  align-items: center;
  justify-content: center;
}
.btn:active {
  opacity: 0.8;
}
</style>
